import styled from 'styled-components';

export const FlipStyle = styled.div`
	width: 100%;
	height: 100%;
	background-color: #dddddd;
	.full-screen-square {
		width: 500px;
		height: 500px;
		background-color: red;
	}
	.square {
		width: 100px;
		height: 100px;
		background-color: red;
	}
	.box {
		width: 500px;
		border: 1px solid red;
		display: grid;
		grid-template-columns: repeat(auto-fill, 100px);
		column-gap: 10px;
		row-gap: 30px;
		.item {
			background: red;
		}
	}
`;

export const DragStyle = styled.div`
	width: 400px;
	.drag-box {
		width: 100%;
		/* height: 250px; */
		border: 1px solid blue;
		overflow-y: auto;

		display: grid;
		grid-template-columns: repeat(auto-fill, 100px);
		column-gap: 10px;
		row-gap: 30px;

		.item {
			width: 100%;
			height: 50px;
			line-height: 50px;
			padding: 0 15px;
			background-color: #4a7fe8;
			margin-bottom: 10px;
			border-radius: 8px;
			overflow: hidden;
			color: #fff;

			&.moving {
				background: transparent;
				color: transparent;
				border: 1px dashed #ccc;
				cursor: move;
			}
		}
	}
`;
